<template>
  <div class="page_wrap" @contextmenu="handleMouse">
    <div class="top_warp" v-on:dblclick="hitMax">
      <div class="logo" v-on:mousedown="hitCaption">
        <div style="margin-left:20px;"><img src="@/assets/imgs/logo.svg" style="width:20px;padding-top:10px;" /></div>
        <div style="font-size:18px;margin-left:5px;">HeckMonit</div>
        <div style="margin-left:100px;">
        </div>
      </div>
      <div class="tool">
        <div class="tools" v-on:click="hitMin">
          <iconpark-icon name="minus"></iconpark-icon>
        </div>
        <div class="tools" v-on:click="hitMax">
          <iconpark-icon name="full-screen-two"></iconpark-icon>
        </div>
        <div class="tools" v-on:click="hitClose">
          <iconpark-icon name="close"></iconpark-icon>
        </div>
      </div>
    </div>

    <div class="login_content">
      <div class="login_content_content">
        <div class="login_left">
          <!-- <img src="@/assets/imgs/login_banner.svg" style="width:550px;"> -->
        </div>
        <div class="login_right">
          <div style="font-size: 24px;padding:24px;text-align: center;">账号登录</div>
          <div>
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="0px"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
            >
              <el-form-item prop="username">
                <el-input clearable class="input-border-style" v-model="ruleForm.username" style="height:40px;" placeholder="用户名">
                  <!-- <template #prepend><iconpark-icon name="avatar"></iconpark-icon></template> -->
                </el-input>
              </el-form-item>

              <el-form-item prop="username">
                <el-input clearable class="input-border-style" type="password" v-model="ruleForm.password" style="height:40px;" placeholder="密码">
                  <!-- <template #prepend><iconpark-icon name="lock"></iconpark-icon></template> -->
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-button style="width:100%;height:38px;" type="primary" v-on:click="login('ruleFormRef')">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="color: #00000080;">账号密码请向管理员索取<br/>客户端版本：v1.5.0</div>
          <!-- <el-button v-on:click="login">登录</el-button> -->
        </div>
        
      </div>

      <div class="copyright">
        Copyright ©2022 heckman.cn All Rights Reserved
      </div>
    </div>
    

  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data(){
    return{
      ruleForm:{
        username:'',
        password:''
      },
      rules:{
          username: [
              { required: true, message: '必填项不能为空', trigger: 'blur' }
          ],
          password: [
              { required: true, message: '必填项不能为空', trigger: 'blur' }
          ]
      },
    }
  },
  methods:{
    handleMouse(e){
      e.preventDefault();
    },
    hitCaption(){
      aardio.hitCaption()
    },
    hitMin(){
      aardio.hitMin()
    },
    hitMax(){
      aardio.hitMax()
    },
    hitClose(){
      aardio.hitClose()
    },
    login(formName){
      this.$refs[formName].validate((valid) => {
         if (!valid) {
          return false;
        }else{
          var url = window.SITE_CONFIG['apiURL']+'/api/login'
          this.$axios({
              method:'post',
              url:url,
              data:this.ruleForm,
              header:{
                  'Content-Type':'application/json'
              }
          })
          .then(res=>{
              if(res.data.code==0){
                  Cookies.set("token", res.data.data);
                  this.getUserinfo(res.data.data)
              }else{
                  ElMessage({
                      type: 'error',
                      message: res.data.msg,
                  })
              }
          })
          .catch(Error=>{
          })
        }
      })
    },
    getUserinfo(token){
        this.$axios.get(window.SITE_CONFIG['apiURL']+'/api/userinfo?token='+token).then(res => {
            if(res.data.code!=0){
                this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error'
                });
            }
            Cookies.set("userId", res.data.data.id);
            Cookies.set("username", res.data.data.username);
            Cookies.set("realname", res.data.data.realname);
            this.$router.push('/home')
        })
    },
  }
}
</script>
<style scoped>
.page_wrap{
  background-color: #fff;
  font-size: 12px;
  color:#000;
}

.top_warp{
  display: flex;
  height:50px;
  background-color: #282B33;
  justify-content: space-between;
  align-items: center;
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
}

.tool{
  margin-right:20px;
  color:#fff;
  display: flex;
  align-items:center;
}

.tools{
  margin-left:25px;
  cursor: pointer;
  padding-top:3px;
  /* padding:2px; */
  font-size:14px;
  color:#adb0b8;
}

.tools:hover{
  /* background-color: #E33E3E; */
  color:#ffffff;
}

.logo{
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  /* margin-left: 20px; */
  /* width: 80%; */
  width: calc(100vw - 117px);
  display: flex;
  align-items: center;
}

.logo input{
  background-color: #E33E3E;
  border: 0px;
  padding:5px 8px;
  color:#fff;
  font-size: 16px;
  line-height: 20px;
}

.logo input:focus{
  background-color: #E33E3E;
  border: 0px !important;
}

.login_content{
  position: relative;
  padding-top:50px;
  /* top:50px; */
  height:calc(100vh);
  background-image: url('@/assets/imgs/login.jpg');
}

.login_content_content{
  width: 900px;
  height: 400px;
  margin: 120px auto;
  /* border:1px solid #000; */
  display: flex;
}

.login_left{
  width: 550px;
  background-image: url('@/assets/imgs/login_banner.svg');
}

.login_right{
  background-color: #fff;
  width:350px;
  padding:40px;
}

.copyright{
  text-align: center;
  font-size: 12px;
  position:fixed;
  bottom: 0;
  width:100%;
  height:50px;
}
</style>